<template>
    <div>
        <div class="homeLine_wrap">
            <lines :dateObj="dateObj" :webNumArr="webNumArr" :javaNumArr="javaNumArr" :shejiNumArr="shejiNumArr"></lines>
        </div>
    </div>
</template>

<script>

import lines from '@/views/echarts/line'
//引入接口
import { _getCourseList } from '@/api/courseList.js'
export default {
    data() {
        return {
            pageStart: 1,
            courseList: [],//所有课程的数据
            dateObj:{},//得到日期数组，x轴数据
            webArr:[],//前端所有课程
            javaArr:[],//后端所有数据
            shejiArr:[],//视觉设计所有数据
            webNumArr:[],//前端折线图数据
            javaNumArr:[],//后端折线图数据
            shejiNumArr:[]//视觉设计折线图数据
        }
    },
    components: {
        lines
    },
    mounted() {
        this.getCourse()
    },
    methods: {
        async getCourse() {
            var courseRes = await _getCourseList({
                pageStart: this.pageStart
            })
            console.log(courseRes)
            this.courseList = this.courseList.concat(courseRes.data.data.list)
            if (this.pageStart < Math.ceil(courseRes.data.data.count / courseRes.data.data.pageSize)) {
                this.pageStart++
                this.getCourse()
            }
            //处理日期  得到x轴的所有数据
            console.log(this.courseList)//得到所有的课程数据
            //通过map遍历数组，set去重得到x轴需要的数据
            var arr = this.courseList.map(item=>{
                return new Date(item.createAt).toLocaleDateString()
            })
            var newArr = arr.reverse()
            this.dateObj = new Set(newArr)
            console.log(this.dateObj)//set对象

            //创建数组 从所有课程中将前端、后端、视觉设计筛选出来形成三个数组
            //按前后端专业分类
            this.courseList.forEach(item=>{
                if(item.CategoryOne == '1'){
                    this.webArr.push(item)
                }else if(item.CategoryOne == '2'){
                    this.javaArr.push(item)
                }else{
                    this.shejiArr.push(item)
                }
            })
            // console.log(this.webArr)
            this.webNumArr = this.getArr(this.webArr)
            this.javaNumArr = this.getArr(this.javaArr)
            this.shejiNumArr = this.getArr(this.shejiArr)
        },
        //封装一个方法，以日期为循环条件，筛选出前端、后端、视觉设计的数量
        //在专业分类的数组中，用时间再统计数量
        getArr(asarr){
            // console.log(asarr)
            //创建一个空对象，属性名为添加日期的时间 属性值为一天中添加数据的次数
            var obj = {}
            //时间对象
            this.dateObj.forEach(item => {
                var x = 1;
                //所有课程数据 数组
                asarr.forEach((courseItem)=>{
                    if(item == new Date(courseItem.createAt).toLocaleDateString()){
                        obj[item] = x++
                    }
                })
            });
            var resarr = Object.values(obj)
            return resarr
        }
    }
}
</script>

<style lang="less" scoped>
.homeLine_wrap {
    width: 90%;
    height: 310px;
    overflow: hidden;
    margin: 0 auto;
    background-color: #988fa681;
    margin-top: 10px;
}
</style>